<template>
  <div class="baseinfo" v-if="userInfo">
    <h1>基本资料</h1>
    <ul>
      <li>
        <label>性别</label>
        <p>{{ sexs[userInfo.sex] }}</p>
      </li>
      <li>
        <label>年龄</label>
        <p>{{ userInfo.age || '-' }}</p>
      </li>
      <li>
        <label>职业</label>
        <p>{{ userInfo.profession || '-' }}</p>
      </li>
      <li v-if="userInfo.province">
        <label>所在地</label>
        <p>{{ userInfo.province }} - {{ userInfo.city }}</p>
      </li>
      <li>
        <label>个性签名</label>
        <p>{{ userInfo.intro || '-' }}</p>
      </li>
      <li>
        <label>简介</label>
        <p>{{ userInfo.remark || '-' }}</p>
      </li>
    </ul>
    <h1 v-if="userInfo.identification && userInfo.identification.identified">认证信息</h1>
    <ul v-if="userInfo.identification && userInfo.identification.identified">
      <li>
        <label>认证</label>
        <p>{{ userInfo.identification.identified ? userInfo.identification.profession : '-' }}</p>
      </li>
      <li>
        <label>入行</label>
        <p>{{ userInfo.identification.startYear || '-' }}</p>
      </li>
      <li>
        <label>描述</label>
        <p>{{ userInfo.identification.remark || '-' }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      userInfo: {
        type: Object,
      },
    },
    data() {
      return {
        sexs: {
          0: '保密',
          1: '男',
          2: '女',
        },
      };
    },
    mounted() {},
    methods: {},
  };
</script>
<style lang="less" scoped>
  .baseinfo {
    background-color: rgba(#000000, 0.4);
    font-weight: 400;
    line-height: 4rem;
    padding: 3.5rem 3.5rem 0;
    border-radius: 1.5rem;
    h1 {
      font-size: 3.3rem;
      font-weight: bold;
      color: #cccccc;
    }
    ul {
      padding-bottom: 5rem;
      li {
        margin-top: 4rem;
        display: flex;

        label {
          font-size: 2.8rem;
          font-weight: 400;
          color: #888888;
          width: 14rem;
          display: inline-block;
          flex: none;
        }
        p {
          font-size: 2.8rem;
          font-weight: 400;
          color: #cccccc;
          flex: 1;
        }
      }
    }
    .gap-line {
      height: 0.7rem;
      background: #1b1b1b;
      opacity: 0.5;
      border-radius: 0.3rem;
      margin: 4rem auto;
    }
  }
</style>
